import React, { Component } from 'react'
import {
    View,
    StyleSheet,
    Text,
    ScrollView,
    Image,
    TouchableOpacity,
    Alert,
} from 'react-native'
import NavBar from 'src/components/navBar'
import IdentifyProgress from '../components/IdentityProgress'
import UploadIdCard from '../components/UploadIdCard'
import UploadTips from '../components/UploadTips'
import Input from '../components/Input'
import {deviceHeight, deviceWidth, changeId} from "src/util"
import ActionSheet from 'react-native-actionsheet'
import {avatarUpdate} from "src/service/Auth"
import ImagePicker from 'react-native-image-crop-picker'
import Layer from "src/components/Layer"
import {inject} from "mobx-react/native"
import navigationhelper from "src/components/navigationhelper"
import Divider from "src/components/Divider"
import { Flex,List, InputItem} from '@ant-design/react-native';
import drawMoneyManager from '../../../service/Home'
import Password from 'react-native-password-pay'
import SupportBankCardList from './components/SupportBankCardList'


@inject('userAuth')
export default class DrawMoney extends Component<{}> {
    constructor (props) {
        super(props)
        this.state = {
            money:'',
            isClick:false,
            cardDetail:{}
        }
    }

    componentDidMount=()=>{
      this.getCardDetail()
    }

   getCardDetail=()=>{
      Layer.showLoading()
       drawMoneyManager.fetchUserCashDetail({
        token:this.props.userAuth.token,
        }).then((res)=>{
            // console.log('====>>>>',res)
            Layer.hiddenLoading()
            if(res.status == 'success'){
                this.setState({
                    cardDetail:res.data
                })
            }
            else{
                Layer.showMsg('申请失败')
            }
          }).catch((res)=>{
            Layer.showMsg(res.message)
          }) 
    } 
     
    aplayDrawMoney=(money)=>{
        if(money.length == 0){
            return Layer.showMsg('请先输入金额')
        }
        drawMoneyManager.fetchDrawMoney({
        token:this.props.userAuth.token,
        amount:money,
        }).then((res)=>{
            Layer.hiddenLoading()
            if(res.status == 'success'){
                navigationhelper.goBack()
                Layer.showMsg('申请成功')
            }
            else{
                Layer.showMsg('申请失败')
            }
          }).catch((res)=>{
            Layer.showMsg(res.message)
          }) 
    }

    render() {
        const {money,isClick,cardDetail} = this.state
        const arr = Object.keys(cardDetail)
        const {balance,create_time,real_name,mobile,idcard,card_number,consume_rate,recommend_mobile} = this.props.userAuth.currentUser
        // console.log('====>',this.props.userAuth.currentUser)
        return (
        <View style={{flex:1}}>
             <NavBar 
                // backgroundColor={'transparent'}
                 back={()=>{navigationhelper.goBack() }}
                 title="提现"
                 right={<Text style={{color:'#378EFB',fontSize:14}}>提现记录</Text>}
                 pressRight={()=>{
                    navigationhelper.push('DrawMoneyHistory')
                 }}/>
        <ScrollView>
            <View style={{backgroundColor:'#fff',marginTop:20,paddingVertical:20}}>
            <View style={{flexDirection:'row'}}>
                <Image style={{marginLeft:15,width:42,height:42}} source={{uri:arr.length > 0&&cardDetail.card?cardDetail.card.bank_logo:''}}></Image>
                <View style={{flexDirection:'column',alignItems:'flex-start',justifyContent:'flex-start',marginLeft:15}}>
                <Text style={{color:'#2E2E2E',fontSize:16,fontWeight:'bold'}}>{arr.length > 0&&cardDetail.card?cardDetail.card.full_card_number:''}</Text>
                <Text style={[styles.commonText,{marginTop:10}]}>{arr.length > 0&&cardDetail.card?cardDetail.card.name:''}</Text>
                </View>
            </View>

            <View style={{marginLeft:15,marginTop:20,flexDirection:'row',alignItems: 'center',}}>
            <Text style={{color:'#2E2E2E',fontSize:16}}>可提现余额</Text>
            <Text style={{color:'#378EFB',fontSize:17,marginLeft:15}}>{balance}</Text>
            </View>

            <Flex 
            
            onPress={()=>{
                navigationhelper.navigate('ChangeDrawMoneyCard',{callback:()=>{this.getCardDetail()}})
            }}
            style={{borderRadius:16,paddingVertical:7.5,paddingHorizontal:10,position:'absolute',top:15,right:10}} justify='center' align='center'>
            <Text style={{color:'#378EFB',fontSize:15}}>更换</Text>

            </Flex>

            <View style={{backgroundColor:'#E6E3E6',height:1,marginTop: 10,}}/>

            <Text style={styles.commonTextOne}>提现金额</Text>

           <View style={styles.inputItem}>
            <InputItem
            style={{color:'#378EFB',marginLeft:-20,fontSize:18,marginTop:5}}
            defaultValue={isClick?balance:null}
            type='decimal-pad'
            onChange={value => {
              this.setState({
                money:value,
                isClick:false
              });
            }}
            extra={
            <Flex onPress={()=>{
                this.setState({
                    isClick:true,
                    money:balance
                })       
             }}>
             <Text style={{color:'#378EFB',fontSize:14}}>全部提现</Text>   
             </Flex>
             }
            placeholder={'请输入额度'}
            editable={true}>
          <Text style={styles.leftTextStyle}>¥</Text>   
          </InputItem>
          </View>
          <Text style={styles.commonTextOne}>手续费¥{cardDetail.fee}</Text>
            </View>
            <Text style={styles.commonTextOne}>每笔金额不能低于{arr.length > 0?cardDetail.minimum:'0'}元</Text>

            <Flex style={{marginLeft:15,marginTop:20}}
            onPress={()=>{
                this.regModal.showOrDismiss(true)
            }}
            >
                <Text style={{color:'#8E8E93',fontSize:12}}>支持的银行</Text>
                <Image style={{ marginLeft:10,width:15, height: 15 }} source={require('src/assets/mine/tip.png')}></Image>
            </Flex>

{/* 
            <Password
            style={{marginHorizontal:50}}
            onChange={(text)=>{
                console.log(text)
            }} 
            maxLength={6}>
            </Password>  */}
            <Flex style={{marginTop:100,borderRadius:5,backgroundColor:'#378EFB',paddingVertical:15,marginHorizontal:30}} justify='center' align='center' onPress={()=>{
                this.aplayDrawMoney(money)
            //  Alert.alert(
            //  '您还没有设置支付密码,去设置?',
            //  null,
            // [
            //   {text: '取消', onPress: () => console.log('取消')},
            //   {text: '确定', onPress: () => console.log('确定')},
            //  ])
            }}>
            <Text style={{color:'#FFFFFF',fontSize:16}}>立即提现</Text>
            </Flex>

            <SupportBankCardList
             isVisible={false}
             ref={i => this.regModal = i}
             bankList = {arr.length >0?cardDetail.supporting_banks:[]}
            />

       </ScrollView>
        </View>   
     )}
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: deviceHeight,
        backgroundColor: '#F5F5F5'
    },
    commonText:{
        color:'#8E8E93',
        fontSize:12,
        // marginLeft:15,
        marginTop:20
    },
    commonTextOne:{
        color:'#8E8E93',
        fontSize:12,
        marginLeft:15,
        marginTop:20
    },
    leftTextStyle: {
        color:'#8E8E93',
        marginLeft:10,
        fontSize:32,
        fontWeight:'bold'
      },
      inputItem:{
        fontSize:15,
        marginTop:20,
      },
})